<template>
  <div :id="page_name">
    <!--<x-header :left-options="{showBack: true,backText:''}">{{page_title}}</x-header>-->
    <div class="tip">
      <ul class="tip_ul">
        <li>密码用于保护私钥和交易授权，强度非常重要</li>
        <li>钱包不存储密码，也无法帮您找回，请务必牢记</li>
      </ul>
    </div>
    <group title="钱包名称">
      <x-input placeholder="用于标识您的钱包" :min="4" :max="16" v-model="name" ref="name" :required="true"></x-input>
    </group>
    <group title="请输入密码">
      <x-input placeholder="钱包密码" type="password" v-model="password" :min="4" :max="16" ref="password"
               :required="true"></x-input>
      <x-input placeholder="再次输入钱包密码" type="password" v-model="confirm_password" :min="4" :max="16"
               :equal-with="password" ref="confirm_password" :required="true"></x-input>
    </group>
    <box gap="20px 10px">
      <x-button type="primary" style="border-radius:4px;height:2.375rem;font-size:0.875rem;"
                @click.native="createWallet">立即创建
      </x-button>
    </box>

    <popup v-model="seedShow" height="100%" v-transfer-dom>  <!--vux  v-transfer-dom 指令 -->
      <x-header :left-options="{showBack: false}" class="tip_title">钱包创建成功</x-header>
      <div class="tip">
        <div class="save_seed_title">请备份助记词</div>
        <ul>
          <li>请抄写下您的钱包助记词</li>
          <li>助记词用于恢复钱包或者重置密码</li>
          <li>钱包不保存助记词信息，一旦丢失，您将无法再找回</li>
        </ul>
      </div>
      <div class="seedShow">
        {{seed}}
      </div>
      <box class="seedSave">
        <x-button type="primary" @click.native="seedSave">已保存好</x-button>
      </box>
    </popup>

  </div>
</template>

<script>
  import {TransferDom, XHeader, XInput, XButton, Box, AlertModule, Popup, XTextarea} from 'vux';
  import woutlaEth from "@/ethereum";
  import woutlaCrypto from '@/crypto';

  export default {
    name: "ContentA",
    directives: {
      TransferDom
    },
    components: {
      "x-header": XHeader,
      "x-input": XInput,
      "x-button": XButton,
      "box": Box,
      "popup": Popup,
      "x-textarea": XTextarea
    },
    data() {
      return {
        page_name: "create-wallet",
        page_title: "page_title",
        name: "abcd123",
        password: "123456",
        confirm_password: "123456",
        seedShow: false,
        seed: ""

      }
    },
    methods: {
      seedSave: function () {
        this.seedShow = false
        this.$router.push({path: '/ContentA'})
      },
      createWallet: function () {
        this.$refs.name.validate();
        this.$refs.password.validate();
        this.$refs.confirm_password.validate();
        if (this.$refs.name.valid && this.$refs.password.valid && this.$refs.confirm_password.valid) {

          var loading = this.$loading({text: "创建中"});
          var $vue = this;
          setTimeout(function () {
            $vue.seed = woutlaEth.wallet.createSeed();
            console.log("生成助记词:", $vue.seed);
            var _wallet = woutlaEth.wallet.createBySeed($vue.seed, "", 0);
            console.log("创建钱包:", _wallet);
            console.log("钱包地址:", _wallet.address);
            console.log("钱包私钥:", _wallet.privatekey);
            var wallet = {};
            ``
            wallet.name = $vue.name;
            wallet.address = _wallet.address;
            console.log("密码器：", woutlaCrypto);
            // console.log("TEST===============")
            // var encrpted = woutlaCrypto.encrypt("08d1aaaa0d5a3f91c6ca99cc0b484ba44ed4fa3656fa4f71b5120f357a709fca");
            // var plain = woutlaCrypto.decrypt(encrpted);
            // console.log("TEST===============")
            wallet.enc_privateKey = woutlaCrypto.encrypt(_wallet.privatekey, $vue.password);
            $vue.$store.commit("addWallet", wallet);
            // $vue.$store.commit("loadProperties");
            //
            // $vue.$http.post('/api/app.wallet/wallets/bind',{
            //   name:wallet.name,
            //   address:wallet.address,
            //   enc_privatekey:wallet.enc_privateKey
            // }).then(res => {
            //   if(res.error>0){
            //     $vue.$vux.toast.text(res.message);
            //     console.log(res);
            //   }else{
            $vue.seedShow = true;
            //   }
            // }).catch(err => {
            //   console.log(err);
            //   if (err.errcode) {
            //     $vue.$vux.toast.text(err.message);
            //   }
            //   //  this.Toast(err || '网络异常，请求失败');
            // });
            loading.close();
          }, 1000);
        }
        else {
          this.$refs.name.forceShowError = true;
          this.$refs.password.forceShowError = true;
          this.$refs.confirm_password.forceShowError = true;
          if (!this.confirm_password) {
            this.$refs.confirm_password.errors.equal = '输入不一致';
            this.$refs.confirm_password.getError();
          }
        }
      }
    }

  }
</script>

<style scoped>
  .tip {
    line-height: 25px;
    padding: .8rem 1.5rem;
    background: #2e68b3;
    color: #fff;
  }

  .vux-popup-dialog {
    background: #fff;
  }

  .seedShow {
    padding: 2rem;
    background: #ccc;
    margin: 2rem 3rem;
    line-height: 2rem;
    font-size: 1rem;
  }

  .seedSave {
    margin: 0px 3rem;
  }

  .save_seed_title {
    text-align: center;
    font-size: 16px;
    line-height: 35px;
  }
</style>
